<template>
  <div v-loading="loading" class="app-container">
    <el-card class="scan-card">
      <div class="card-title">
        <i class="el-icon-qrcode title-icon" />
        <span>扫描工作站二维码</span>
      </div>
      <!-- 输入区域 - 优化焦点状态 -->
      <div class="input-wrapper">
        <el-input
          ref="scanInput"
          v-model="scanForm.station"
          type="password"
          placeholder="扫描二维码或输入编号"
          class="scan-input"
          @keyup.enter.native="naviageteStation(scanForm.station)"
        >
          <i slot="prefix" class="el-icon-qrcode prefix-icon" />
        </el-input>
      </div>
      <!-- 极简提示 - 优化颜色和间距 -->
      <div class="tip-text">扫描后自动进入对应工作站</div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'InputWorkStation',
  dicts: ['station_dict'],
  data() {
    return {
      scanForm: {
        station: ''
      },
      inputFocused: false,
      stationList: [],
      loading: true
    }
  },
  watch: {
    'dict.station_dict': {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (Array.isArray(newVal) && newVal.length > 0) {
          this.getStationList()
        }
      }
    }
  },
  mounted() {
    this.$refs.scanInput.focus()
  },
  methods: {
    getStationList() {
      this.stationList = this.dict.station_dict.map(item => {
        return {
          label: item.label,
          value: item.value
        }
      })
      this.loading = false
    },
    naviageteStation(val) {
      const index = this.stationList.findIndex(item => item.value === val)
      // console.log(index)
      if (index === -1) {
        this.scanForm.station = ''
        this.$message.error('未找到该工作站，请重新扫描或输入')
      } else {
        const stationCode = this.stationList[index].label
        sessionStorage.setItem('hiddenStationCode', stationCode)
        this.$router.push('/laminationManagement/laminationCraft')
      }
    }
  }
}
</script>

<style scoped lang="scss">

// 卡片样式 - 优化阴影和边框，添加渐变边框效果
.scan-card {
  margin: 200px auto;
  width: 100%;
  max-width: 420px;
  border-radius: 16px !important;
  border: 1px solid #E4E7ED !important;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
  padding: 40px 32px;
  background-color: #fff !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // &:hover {
  //   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  //   transform: translateY(-2px);
  // }
}

// 标题样式 - 优化间距和图标搭配
.card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 32px;

  .title-icon {
    font-size: 24px;
    color: #4299e1;
    margin-right: 10px;
  }
}

// 输入框容器
.input-wrapper {
  margin-bottom: 24px;
  position: relative;
}

// 输入框样式 - 优化高度、边框和焦点效果
.scan-input {
  font-size: 16px;
  transition: all 0.2s ease;

  &:focus-within {
    border-color: #4299e1 !important;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15) !important;
  }

  .prefix-icon {
    font-size: 18px;
    color: #718096;
    transition: color 0.2s ease;
  }

  &:focus-within .prefix-icon {
    color: #4299e1;
  }
}

// 提示文本 - 优化颜色和字体
.tip-text {
  font-size: 14px;
  color: #718096;
  text-align: center;
  margin-bottom: 32px;
  line-height: 1.6;
}

// 辅助文本 - 底部说明链接
.helper-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #a0aec0;

  span {
    margin-right: 8px;
  }

  a {
    color: #4299e1;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;

    &:hover {
      color: #3182ce;
      text-decoration: underline;
    }
  }
}

</style>
